<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    
    <title>后台管理</title>
    
     
    
	<link rel="stylesheet" type="text/css" href="<%=path%>/JS/extjs/resources/css/ext-all.css"/>
	<script type="text/javascript" src="<%=path%>/JS/extjs/adapter/ext-base.js"></script>
	<script type="text/javascript" src="<%=path%>/JS/extjs/ext-all.js"></script>
	<script type="text/javascript" src="<%=path%>/JS/extjs/ext-lang-zh_CN.js"></script>

  </head>
  
  <body>
    
    <script type="text/javascript">
    function InitMain(){
        var toolbar = new Ext.Toolbar({
            id:'toolbar',
            border:'false',
            x:0,
            y:0,
            items:[{
                	id:'index',
                	text:'首页',
                	xtype:'tbbutton',
                	cls:'x-btn-text.icon',
                	handler:function(){
            			var tabpaneltemp = Ext.getCmp("home");
            			var tabpanel = Ext.getCmp("tabpanel");
            			//alert(tabpaneltemp);
            			if(tabpaneltemp == null){
                			//alert(1111111);
							tabpaneltemp = new Ext.Panel({
								id : "home",
								title : "首页",
								xtype : "panel",
								layout : "fit",
								border : "false",
								frame : "false",
								closable : "true",
								html : "你好呀，我是首页"
							});
							tabpanel.add(tabpaneltemp);
							
						}
        				tabpanel.setActiveTab(tabpaneltemp);//显示打开的页签
            		}
            	},{
				    id:'mainbtn',
				    text:'我的办公室',
				    xtype:"tbbutton",
				    cls: 'x-btn-text-icon',
				    handler:function(){
				    	//展开对应的Panel
						var mainpanel = Ext.getCmp("treePanel1");
						mainpanel.expand(true); 
						
					 }
				},{
				    id:"sendbtn",
				    text:'主数据管理',
				    xtype:"tbbutton",
				    cls: 'x-btn-text-icon',
				    handler:function(){
				    	var sendpanel = Ext.getCmp("treepanel2");
				    	sendpanel.expand(true); 
					 }
				}
                  ]
        });
        var tabpanel = new Ext.TabPanel({
        	id:"tabpanel",
        	activeTab:0,
        	autoWidth:true,
        	border:false,
        	frame:false,
        	items : [
        	         {
            	         id:"home",
            	        xtype : "panel",
            	        title : "首页",
            	        layout : "fit",
            	        closable : "true",
            	        border : "false",
            	        frame : "false",
            	        html : "你好呀，我是首页 " 
            	     }
        	]
        });
        var northPanel = new Ext.Panel({
            id:'northPanel',
            region:'north',
            //height:35,
            tbar:[toolbar]//此处加上'[]'与不加在页面显示的按钮有区别
        });
        var southPanel = new Ext.Panel({
            id:'southPanel',
            region:'south',
            height:30,
            html:'<div style = "height:33px;">状态栏</div>'
        });
		var treePanel1 = new Ext.Panel({
			xtype : "treepanel",
			id : "treePanel1",
			title : "我的办公室",
			border : false,
			layout:'fit',
			border: false,
			frame:true, 
			items : [{
				xtype:'treepanel',singleExpand:true,animate:true,autoScroll:true,containerScroll: true,
                border: false,rootVisible:false,lines:true,
                width:200,height:370,enableDD:false,dropConfig: {appendOnly:true},                          
                loader: new Ext.tree.TreeLoader({
					 preloadChildren: true,
				     clearOnLoad: false
					 //dataUrl:"json.aspx?Param=1"
					 }),
			root : new Ext.tree.AsyncTreeNode({
				text : "我的办公室",
				draggable:false,
				expanded : true,
				children : [
				            {
					            id : "jobdata",
					            text : "办公数据",
					            leaf : true,
					        },{
						        id : "jobjob",
						        text : "办公事件",
						        leaf : true
					        }
							]
			}),
			listeners : {"click":function(node,e){
        			var tabpaneltemp = Ext.getCmp(node.id);
        			//当页签未打开时，打开一个新的页签
					if(node.leaf){
        				if(tabpaneltemp == null){
							tabpaneltemp = new Ext.Panel({
								id : node.id,
								title : node.text,
								xtype : "panel",
								layout : "fit",
								border : "false",
								frame : "false",
								closable : "true",
								html : "你好呀，我是" + node.text
							});
							tabpanel.add(tabpaneltemp);
							
						}
        				tabpanel.setActiveTab(tabpaneltemp);//显示打开的页签
        			}
			}}
			}],
        	listeners:{
        		'collapse': function(node,e){
        		//todo 收缩的操作
        		},
        		'expand' : function(node,e){
        		//todo 展开的操作 
        		}
        		}
		});
		var treePanel2 = new Ext.Panel({
			xtype : "treepanel",
			id : "treepanel2",
			title : "主数据管理",
			border : false,
			layout:'fit',
			border: false,
			frame:true, 
			items : [{
				xtype:'treepanel',singleExpand:true,animate:true,autoScroll:true,containerScroll: true,
                border: false,rootVisible:false,lines:true,
                width:200,height:370,enableDD:false,dropConfig: {appendOnly:true},                          
                loader: new Ext.tree.TreeLoader({
					 preloadChildren: true,
				     clearOnLoad: false
					 //dataUrl:"json.aspx?Param=1"
					 }),
			root : new Ext.tree.AsyncTreeNode({
				text : "主数据管理",
				draggable:false,
				expanded : true,
				children : [
				            {
					            id : "department",
					            text : "部门管理",
					            leaf : true,
					        },{
						        id : "company",
						        text : "公司管理",
						        leaf : true
					        },{
						        id : "permissions",
						        text : "权限管理",
						        children : [
						                    {
							                    id : "permission",
							                    text : "权限管理",
							                    leaf : true
							                },{
								                id : "permissionType",
								                text : "权限类别",
								                leaf : true
							                }
									        ]
					        }
							]
			}),
			listeners : {"click":function(node,e){
        			var tabpaneltemp = Ext.getCmp(node.id);
        			//当页签未打开时，打开一个新的页签
					if(node.leaf){
        				if(tabpaneltemp == null){
							tabpaneltemp = new Ext.Panel({
								id : node.id,
								title : node.text,
								xtype : "panel",
								layout : "fit",
								border : "false",
								frame : "false",
								closable : "true",
								html : "你好呀，我是" + node.text
							});
							tabpanel.add(tabpaneltemp);
							
						}
        				tabpanel.setActiveTab(tabpaneltemp);//显示打开的页签
        			}
			}}
			}]
		});
        
        var westPanel = new Ext.Panel({
            id:'westPanel',
        	title:'导航菜单',
        	region:'west',
        	width:'200',
        	split:true,
        	collapsible: true,
        	margins:'0 0 0 0',
            layout:'accordion',
            layoutConfig:{animate:false},
            items : [
                     treePanel1,
                     treePanel2
                     ]
        });
		var centerPanel = new Ext.Panel({
			id : 'centerPanel',
			//title : '中心部分',
			region: 'center',
			split:true,
            layout:'fit', 
            items:[tabpanel]
			});

		var viewport = new Ext.Viewport({
			id : 'viewprot',
			layout : 'border',
			items : [
						northPanel,
						southPanel,
						westPanel,
						centerPanel
			]
		});
	}
    	
    	Ext.onReady(InitMain);  

    	  </script>
  </body>
</html>

